<template>
  <div class="container" >
    <!-- 改改style探索下样式-->
    <div
      :id="ids"
      :style="{ width: '400px', height: '340px' }"

    ></div>
  </div>
</template>
<!--, border: '1px solid #000'-->
<script>
export default {
  props: ["x", "y" ,"ids"],
  mounted() {
    this.drawLine(this.y);
  },
  methods: {
    drawLine(value) {
      let haveValueFlag = false;
      for (let i = 0; i < value.length; i++) {
        var tempValue = value[i].value;
        if (tempValue == 0) {
          value[i].value = null;
        } else {
          haveValueFlag = true;
        }
      }

      this.y = value;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.ids));
      // 绘制图表
      var haveValueOption = {
        legend: {	//图表上方的 示例
          bottom: 'bottom',
          data: this.x,
        },
        tooltip: {//探索探索样式
          show: true,
        },
        xAxis: {//探索探索样式
          type: "category",
          show:false,
        },
        yAxis: {//探索探索样式
          type: "value",

        },
        series: [{////探索探索样式 除了data都可以改
          name: '碳排放量占比',
          type: 'pie',
          radius:'70%',
          center:['50%','45%'],
          barWidth: '10%',
          data: value,
          label: {
            show:true,
            position:'outside',
            formatter: `{d}%`
          },
        }]
      };

      myChart.setOption(haveValueOption);

    },
  },
};
</script>
<style scoped>
#a,
#b {
  float: left;
  margin:0px;
}
</style>
